<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-22 10:27:16
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-01-18 17:13:51
 * @FilePath: \cxl-driving-training\src\views\drivingSchool\siteConfig\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>

        <BasicDialogVue :data="data.dialog" @close="data.onCloseDialog(dialogForm)" class="dialog-box">
            <template #content>
                <el-form
                    ref="dialogForm"
                    :inline="true"
                    :model="data.dialogForm"
                    label-width="100px"
                    :rules="data.rules"
                >
                    <el-form-item label="驾校简称：" prop="drivingSchool">
                        <el-select
                            clearable
                            v-model="data.dialogForm.schoolId"
                            :disabled="data.dialog.type === 'create' ? false : true"
                        >
                            <el-option
                                v-for="itemOption in data.drivingSchoolOptions"
                                :key="itemOption.value"
                                :label="itemOption.label"
                                :value="itemOption.value"
                            />
                        </el-select>
                    </el-form-item>
                    <div class="item">
                        <div class="label">关联训练场：</div>
                        <div>
                            <el-radio-group v-model="data.selectSubject" @change="data.onRadioGroupChange">
                                <el-radio-button label="科目二" />
                                <el-radio-button label="科目三" />
                            </el-radio-group>
                        </div>
                    </div>
                </el-form>

                <el-form
                    v-if="data.selectSubject === '科目二'"
                    ref="dialogTwoForm"
                    :inline="true"
                    :model="data.twoForm"
                    label-width="100px"
                    :rules="data.rules"
                >
                    <el-form-item label="场地名称：">
                        <SearchTrainSiteName
                            :data="data.searchTrainSiteName"
                            :siteCategory="2"
                            @change="data.onSelectTrainSiteName"
                        />
                    </el-form-item>
                    <el-form-item label="场地类型：" prop="detailed">
                        <el-input v-model="data.twoForm.siteTypeName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="场地地址：" prop="detailed" :style="{ width: '100%' }">
                        <div
                            style="display: flex"
                            :style="{ width: data.selectSubject === '科目二' ? '100%' : 'auto' }"
                        >
                            <el-input v-model="data.twoForm.addr" disabled></el-input>
                        </div>
                    </el-form-item>
                </el-form>
                <el-form
                    v-else
                    ref="dialogThreeForm"
                    :inline="true"
                    :model="data.threeForm"
                    label-width="100px"
                    :rules="data.rules"
                >
                    <template v-if="data.threeForm.visible[0]">
                        <el-form-item label="场地名称：">
                            <SearchTrainSiteName
                                :data="data.searchTrainSiteName"
                                :siteCategory="3"
                                @change="data.onSelectTrainSiteName"
                            />
                        </el-form-item>
                        <el-form-item label="场地地址：" prop="detailed" :style="{ width: 'auto' }">
                            <div style="display: flex">
                                <el-input v-model="data.threeForm.addr1" disabled></el-input>
                                <div class="operation">
                                    <el-button
                                        icon="Plus"
                                        type="primary"
                                        @click="data.onClickAddSite(0)"
                                        v-if="data.threeForm.visible[0] && !data.threeForm.visible[1]"
                                    />
                                    <el-button
                                        icon="Delete"
                                        type="danger"
                                        @click="data.onclickDeleteSite(0)"
                                        v-if="data.threeForm.visible[0] && data.threeForm.visible[1]"
                                    />
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                    <template v-if="data.threeForm.visible[1]">
                        <el-form-item label="场地名称：">
                            <SearchTrainSiteName
                                :data="data.searchTrainSiteName2"
                                :siteCategory="3"
                                @change="data.onSelectTrainSiteName2"
                            />
                        </el-form-item>
                        <el-form-item label="场地地址：" prop="detailed" :style="{ width: 'auto' }">
                            <div style="display: flex">
                                <el-input v-model="data.threeForm.addr2" disabled></el-input>
                                <div class="operation">
                                    <el-button
                                        icon="Plus"
                                        type="primary"
                                        @click="data.onClickAddSite(1)"
                                        v-if="!data.threeForm.visible[0] && data.threeForm.visible[1]"
                                    />
                                    <el-button
                                        icon="Delete"
                                        type="danger"
                                        @click="data.onclickDeleteSite(1)"
                                        v-if="data.threeForm.visible[0] && data.threeForm.visible[1]"
                                    />
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </el-form>

                <div class="btn">
                    <el-button @click="data.onCloseDialog(dialogForm)">取消</el-button>
                    <el-button type="primary" @click="data.submitForm(dialogForm)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import CompanyAdminData from './index'
import { reactive, ref } from 'vue'
import SearchTrainSiteName from '@/components/searchTrainSiteName.vue'

const dialogForm = ref()
const dialogTwoForm = ref()
const dialogThreeForm = ref()

const data = reactive(new CompanyAdminData())
</script>

<style>
.dialog-box .el-input {
    width: 220px;
}
</style>

<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
}

.item {
    display: flex;
    margin-bottom: 16px;
    .label {
        width: 100px;
        padding: 0 12px 0 0;
        text-align: right;
        box-sizing: border-box;
    }
}
.operation {
    margin: 0 0 0 8px;
}
</style>
